<template>
  <div class="com-container" style="margin: 25px auto;width: 60%">

    <el-dialog
        title="检查个人信息"
        :visible.sync="dialogVisible"
        width="60%"
        center
    >
          <div class="description">
      <el-descriptions title="完整信息" :column="2" border v-model="stuInfo">
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-collection-tag"></i>学号</template>
          {{ stuInfo.number }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>新生姓名</template>
          {{ stuInfo.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>性别</template>
          {{ stuInfo.sex }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>年龄</template>
          {{ stuInfo.age }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>民族</template>
          {{ stuInfo.nation }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>政治面貌</template>
          {{ stuInfo.policalstatus }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-user"></i>出生日期</template>
          {{ stuInfo.birthdate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-school"></i>毕业高中</template>
          {{ stuInfo.graducatedschool }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-home"></i>家庭住址</template>
          {{ stuInfo.address }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-mobile-phone"></i>QQ</template>
          {{ stuInfo.qq }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-mobile-phone"></i>微信</template>
          {{ stuInfo.wechat }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-phone-outline"></i>手机号码</template>
          {{ stuInfo.phone }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-date"></i>入学年份</template>
          {{ stuInfo.admissionyear }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-school"></i>学院</template>
          {{ stuInfo.academy }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-school"></i>录取专业</template>
          {{ stuInfo.major }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-s-flag"></i>班级</template>
          {{ stuInfo.aclass }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"><i class="el-icon-position"></i>招生省份</template>
          {{ stuInfo.province }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">确认</el-button>
  </span>
    </el-dialog>

    <div id="allmap" style="width: 100%;height: 400px;overflow: hidden;margin:0;font-family: 微软雅黑; background-color: white">

    </div>
    <div class="checkSelfInfo" style="display: inline-block;left: 20px;margin-right: 20px;">
      <el-button @click="dialogVisible = true">检查个人信息</el-button>
    </div>
    <div class="signIn" style="display: inline-block;right: 20px">
      <el-button type="primary" @click="handleSignInClick">签到</el-button>
    </div>

  </div>
</template>

<script>
export default {

  mounted() {
    this.initMap();
  },
  name: "SignIn",
  data() {
    return {
      dialogVisible: false,
      stuInfo: localStorage.getItem("stuInfo") ? JSON.parse(localStorage.getItem("stuInfo")) : {},
      id: JSON.parse(localStorage.getItem("stuInfo")).id
    }
  },
  methods: {

    initMap: function () {
      // 初始化地图
      const map = new BMapGL.Map("allmap"); // 创建Map实例
      const point = new BMapGL.Point(114.25034700000003, 34.83431699999999); // 设置中心点坐标
      map.centerAndZoom(point, 11); // 初始化地图并设置级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放


      // 默认获取用户所在城市并设置为地图中心点
      const geolocation = new BMapGL.Geolocation();
      geolocation.getCurrentPosition((result) => {
        if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) {
          map.setCenter(result.address.city);
        } else {
          this.$message.error('定位失败，请手动选择城市');
        }
      });

      // 获取当前城市并转换为经纬坐标点
/*      geolocation.getCurrentPosition((result) => {
        if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) {
          const currentCity = result.address.city;
          const cityPoint = new BMapGL.Point(result.address.city, result.address.province); // 根据城市名获取坐标
          map.setCenter(currentCity); // 设置地图中心为当前城市
          this.$message.success('定位成功，当前城市：' + currentCity);
        } else {
          this.$message.error('定位失败，请手动选择城市');
        }
      });*/

      // 添加地图类型控件
      map.addControl(new BMapGL.MapTypeControl({
        mapTypes: [BMapGL.MapType.BMAP_NORMAL_MAP, BMapGL.MapType.BMAP_SATELLITE_MAP]
      }));

      // 添加缩放控件
      map.addControl(new BMapGL.ZoomControl());

      // 添加选择当前城市下拉框
/*      const cityListControl = new BMapGL.CityListControl({
        anchor: BMapGL.ControlAnchor.TOP_LEFT,
        offset: new BMapGL.Size(10, 20)
      });
      map.addControl(cityListControl);*/


    },
    // 检测当前用户是否在开封
    handleSignInClick() {
      const geolocation = new BMapGL.Geolocation();
      geolocation.getCurrentPosition((result) => {
        if (geolocation.getStatus() === BMAP_STATUS_SUCCESS) {
          const currentCity = result.address.city;
          if (currentCity === '北京市') {
            // 后端修改学生签到状态
            this.request.put("/student/" + this.id).then(res=> {
              if(res.code==20031) {
                this.$emit('childFn',3)
                this.$message.success("您已成功签到,系统将于3秒后自动退出")

              } else if(res.code==20030) {
                this.$message.error(res.msg)
              } else {
                this.$message.error(res.msg)
              }
            }).finally(()=>{
              localStorage.removeItem("stuInfo")
              localStorage.removeItem("user")
              window.setTimeout("window.location='/'",3000);
            })
          } else {
            this.$message.error('签到失败，你不在签到范围');
            return false;
          }
        } else {
          this.$message.error('定位失败，请确保浏览器允许地理位置权限');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>